<template>
  <div>
    <!-- 1.最基础方法 直接引用 -->
    <!-- <h1>store中的count:{{ $store.state.count }}</h1> -->

    <h1>store中的count:{{ count }}</h1>
    <h1>store中的num:{{ num }}</h1>
  </div>
</template>

<script>
  import { mapState } from "vuex";
  export default {
    name: "Item",
    mounted() {
      //   console.log(this.$store.state.count);
      //   console.log(this);
      let re = mapState(["count", "num"]);
      console.log(re, "re");
    },
    // computed: mapState(["count", "num"]),
    computed: {
      // ----2.使用数据(计算属性方式)
      //   count() {
      //     return this.$store.state.count;
      //   },
      //   num() {
      //     return this.$store.state.num;
      //   },

      //   3.mapState方法--------数组写法
      //   ...mapState(["count", "num"]),
      // --------对象写法 可以给属性起别名
      ...mapState({ count: "count", num: "num" }),
    },
  };
</script>

<style></style>
